<template>
     <div  class="shoping">
        <cartItem  v-for="(product,index) in products" :key='index' :id='product.id' :img="product.img" :name="product.name" :price='product.price' :num='product.num'   :ref="'cart'+index"></cartItem>
     </div>
 
</template>

<script>
import product from '../data/product'
import CartItem from '../components/CartItem.vue';
export default {
  name: 'CartList',
  data(){
      return {
          products:[
            //   {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000},
            //   {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000},
            //   {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000},
            //   {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000}
          ]
      }
  },
  mounted:function(){
     console.log(product.getCart())
     this.products=product.getCart();
  },
  methods:{
      changeCartNum:function(num){
          console.log('父类接受到了数据',num);
      }
  },
  components:{
      CartItem
  }

  
}
</script>
<style scoped>
 .shoping {
     margin:0 5%;
 }
 .ym {
     width: 420px;
     height: 285px;
     background-color: #fff;
     margin-bottom: 20px;
     border-radius: 6px;
 }
 img {
     border-radius: 6px 6px 0px 0px;
     width: 420px;
 }
 .count {
     color: #E04F9F;
 }
 h4 {
     margin: 12px 40px -8px 20px;
 }
.a {
    margin-left: 20px;
    color: #7C7F92;
    font-size: 15px;
    padding-bottom: 10px;
    margin-bottom: 10px;
 }
</style>
